<template>
  <div
    id="wallet-chart"
    class="wallet-chart-wrap"
    ref="walletChart"
    :style="{width: '100%', height: '100%'}"
  ></div>
</template>

<script>
export default {
  name: "WalletChart",
  data() {
    return {
      myChart: null,
      timer: null,
      seriesData: [],
    };
  },
  props: {
    capitalData: {
      type: Array,
    },
  },
  mounted() {
    console.log("图表数据", JSON.parse(JSON.stringify(this.capitalData)));
    for (let i = 0; i < this.capitalData.length; i++) {
      this.seriesData.push({
        name: this.capitalData[i].word,
        value: this.capitalData[i].value,
      });
    }
    console.log("处理后", this.seriesData);
    if (this.seriesData.length > 0) {
      this.drawLine();
    }
  },
  methods: {
    // 绘制echarts图表
    drawLine() {
      let _this = this;
      let bar_dv = _this.$refs.walletChart;
      // console.log("父宽", document.documentElement.clientWidth * 0.86);
      bar_dv.style.width = document.documentElement.clientWidth * 0.86 + "px";
      if (bar_dv) {
        _this.myChart = _this.echarts.init(bar_dv);
        _this.myChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{b} <br/> {c}&nbsp; ({d}%)",
            transitionDuration: 0,
            textStyle: {
              fontSize: 10,
            },
            position: "right",
          },
          series: [
            {
              name: "资金占比",
              type: "pie",
              radius: ["43%", "70%"],
              center: ["27%", "50%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: "12",
                },
              },
              labelLine: {
                show: false,
              },
              data: _this.seriesData,
            },
          ],
          color: ["#F4640E", "#067A84", "#425664", "#C0A8A2"],
        });
      }
    },
  },
};
</script>

<style lang='scss'>
</style>